<template>
  <div style="padding-bottom: 50px">
    <WebHeader/>
    <div class="mainContent">

      <el-card class="box-card">
        <!--        内容介绍-->
        <div slot="header" class="clearfix">
          <span>【正版特惠】Fences自动整理栅栏工具 永久授权</span>
          <br>
          <span style="font-size: 15px;color: #abb8c3">&nbsp&nbsp 2022年8月29日 下午4:00 • 正版特惠 • 阅读 42070</span>
        </div>
        <div class="text item" style="font-size: 16px;line-height: 1.46">
          <p style="margin: 10px 20px">
            Fences 是知名开发商 Stardock 为 Windows 用户打造的一款经典的桌面管理工具。Fences 通过在桌面自由创建可命名的半透明区域给图标分组，并且在你不需要时隐藏它们。Fences
            还具备自动组织、记忆布局、创建桌面分页和文件夹快捷入口等功能，让你管理桌面更加省心。

            <img src="https://www.giaott.com/images/2022/09/28/jIU4t.jpg" alt="" style="float:left">

            果核有Fences修改版，但是很多小伙伴觉得修改很麻烦，如果你不想用修改版的话，建议直接入正，绑定自己的账号，安装软件直接登录即可授权。
          </p>
        </div>
        <!--        软件特色-->

        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span>软件特色</span>
          </div>
          <div class="text item">
            <el-card class="box-card" shadow="never">
              <div slot="header">
                <span style="font-size: 18px"> <i class="el-icon-caret-right"/> &nbsp &nbsp分区归类，排列图标更有条理</span>
              </div>
              <div class="text item" style="padding: 0">
                <p style="font-size: 16px">
                  在桌面上拖动鼠标划定任意区域，便能一键创建分区或文件夹快捷入口。初次运行 Fences，桌面图标会自动归类，你可以从任意分区和桌面互相拖拽图标重新整理。在单个分区内，你也能按照不同规则给文件继续排序。
                </p>
              </div>
            </el-card>

            <el-card class="box-card" shadow="never">
              <div slot="header">
                <span style="font-size: 18px"> <i class="el-icon-caret-right"/> &nbsp &nbsp分区归类，排列图标更有条理</span>
              </div>
              <div class="text item">
                <p style="font-size: 16px">
                  在桌面上拖动鼠标划定任意区域，便能一键创建分区或文件夹快捷入口。初次运行 Fences，桌面图标会自动归类，你可以从任意分区和桌面互相拖拽图标重新整理。在单个分区内，你也能按照不同规则给文件继续排序。
                </p>
              </div>
            </el-card>

            <el-card class="box-card" shadow="never">
              <div slot="header">
                <span style="font-size: 18px"> <i class="el-icon-caret-right"/> &nbsp &nbsp分区归类，排列图标更有条理</span>
              </div>
              <div class="text item">
                <p style="font-size: 16px">
                  在桌面上拖动鼠标划定任意区域，便能一键创建分区或文件夹快捷入口。初次运行 Fences，桌面图标会自动归类，你可以从任意分区和桌面互相拖拽图标重新整理。在单个分区内，你也能按照不同规则给文件继续排序。
                </p>
              </div>
            </el-card>
          </div>
        </el-card>

        <!--  付费信息-->
        <div>
          <span style="font-size: 25px"> &nbsp &nbsp <b>优惠套餐</b></span>
          <el-divider/>
          <p style="font-size: 16px;line-height: 3.5;margin: 15px 20px">
            官方原价：￥145
            <br>
            荔枝数码：￥89
            <br>
            本软件非steam版本，无需下载steam即可使用。
            <br>
            购买地址：https://store.lizhi.io/site/products/id/39?cid=bffs5rvq
          </p>
        </div>

        <!--        下载地址-->
        <div>
          <h5>&nbsp&nbsp&nbsp 下载地址</h5>
          <el-divider/>
          <p style="font-size: 20px;line-height: 3.5;margin: 15px 20px;">
            官方直链接：<a href="https://store.lizhi.io/site/products/id/39?cid=bffs5rvq">https://store.lizhi.io/site/products/id/39?cid=bffs5rvq</a>
            <br>
            阿里云盘：<a href="https://store.lizhi.io/site/products/id/39?cid=bffs5rvq">https://store.lizhi.io/site/products/id/39?cid=bffs5rvq</a>
          </p>

        </div>


      </el-card>
      <el-divider/>
      <!--        点赞收藏-->
      <div style="display: flex;justify-content: space-around;font-size: 16px;padding: 5px 20px">
        <div class="collection" style="text-align: center">
          <span>
            <img height="15px" src="../../assets/icon/点赞.png" alt=""> &nbsp55
          </span>
          <span><i class="el-icon-chat-line-round"/>&nbsp 25</span>
          <span><i class="el-icon-star-off"/>&nbsp 2</span>
          <span>
               <img width="15" src="../../assets/icon/打赏.png" alt="打赏">&nbsp 25
          </span>
          <el-divider direction="vertical"/>
          <span style="text-align: center"><i class="el-icon-share"/>&nbsp 生成海报</span>
          <span>
            <img width="25" src="../../assets/icon/qq.png" alt="分享到qq">
          </span>
          <span>
            <img width="25" src="../../assets/icon/微信.png" alt="分享到qq">
          </span>
          <span>
            <img width="25" src="../../assets/icon/新浪微博.png" alt="分享到qq">
          </span>
          <span>
            <img width="25" src="../../assets/icon/QQ空间.png" alt="分享到qq">
          </span>

          <span>
            <img width="25" src="../../assets/icon/文本.png" alt="分享到qq">
          </span>
        </div>
      </div>
      <el-divider/>
      <!--      上一篇下一篇-->
      <div style="position:relative;">
        <div class="changeArticle">
          上一个
        </div>
        <div class="changeArticle" style="position: absolute;right: 10px;top: 2px;line-height: 50px">
          下一个
        </div>
      </div>
    </div>
    <!--    侧边栏-->
    <div class="aside">
      <WebAside/>
    </div>
    <!--    相关推荐-->
    <div class="related" style="margin-top: 88px">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>相关推荐</span>
        </div>
        <div class="text item" style="display: flex;justify-content: space-around;flex-wrap: wrap">
          <span v-for="i in 8" :key="i" style="padding: 15px 20px">
            <i class="el-icon-caret-right"/>
            有道云笔记无敌版
          </span>
        </div>
      </el-card>
    </div>
    <!--    发表评论-->
    <div class="comment">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <img height="25" src="../../assets/icon/评论.png" alt="发表评论">
            &nbsp
            发表评论</span>
        </div>
        <div class="text item">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 20}"
            placeholder="请输入内容"
            v-model="comment">
          </el-input>
          <!--      todo   用户信息回显,登录与否两套方案,参考果核-->
          <div>
            <div style="display: flex;align-items: center;justify-content: space-between;background-color: #e3e3e3">
              <div style="text-align: center" align="center">
                <div style="display: flex;align-items: center;justify-content: left">
                  <el-avatar style="margin:26px 21px;"
                             round
                             src="https://www.giaott.com/images/2022/09/13/dCrON.png" :size="45"
                             fit="contain"/>
                  <div>昏昏的君</div>
                </div>
              </div>
              <el-button type="success" plain style="margin-right: 20px">提交</el-button>
            </div>

          </div>
        </div>


      </el-card>
    </div>
    <!--    其他用户评论-->
    <div class="otherComment">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>评论列表 &nbsp (66条)</span>
        </div>
        <!--所有评论内容-->
        <div class="text item">
          <!-- 一条评论-->
          <BaseCommentDetail>
            <div slot="reply" class="reply" style="background-color: #abb8c3">
              <i class="el-icon-caret-top"/>
              <el-card class="box-card" style="background-color: #475669">
                <div slot="header" class="clearfix">
                  <span>玄学树</span>
                  <p style="font-size: 15px;color: #475669">2022年7月3日 下午7:18</p>
                  <p style="font-size: 20px">Microsoft Edge 105.0.1300.0 &nbsp Window10 x64 Edition</p>
                </div>
                <div class="text item">
                  <p style="line-height: 1.45;font-size: 20px">
                    向日葵忠实用户，teamview你给我走吧
                    偶尔在家远程办公，流程稳定，可选流程模式，甚至是降低颜色数来降低延迟
                    毕竟画面精致与低延迟不可兼得
                    果核居然有兑换码！赶紧试试
                  </p>
                </div>
              </el-card>
            </div>
          </BaseCommentDetail>
        </div>
      </el-card>
    </div>

    <div class="page" style="display: flex;justify-content: center;margin-top: 32px">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import WebHeader from "@//view/layout/WebHeader";
import WebAside from "@//view/layout/WebAside";
import BaseCommentDetail from "@//components/base/BaseCommentDetail";

export default {
  name: "Soft",
  components: {BaseCommentDetail, WebAside, WebHeader},
  data() {
    return {
      comment: ''
    }
  }
}
</script>

<style scoped>

/*.reply:before {*/
/*  position: absolute;*/
/*  left: 15px;*/
/*  top: -17px;*/
/*  border: 9px solid transparent;*/
/*  border-bottom: 10px solid #f8f8f8;*/
/*}*/

.comment {
  font-size: 20px;
  line-height: 1.6;
}

ul > li {
  list-style-type: none; /* 先去除小圆点 */
}

.changeArticle {
  background-image: url("https://www.giaott.com/images/2022/09/14/dCzz7.jpg");
  background-color: #0c1622;
  width: 45%;
  height: 100px;
  text-align: center;
  line-height: 50px

}

.collection span {
  margin: 2px 10px;
}

.mainContent, .related, .comment, .otherComment,.page {
  width: 1081px;

  margin-top: 20px;
  margin-left: 187px;
}

.aside {
  position: absolute;
  right: 190px;
  top: 91px;
}

a {
  color: green;
}
</style>
